<template>
    <div id="proManage">
        <p class="page-title">商品管理</p>
        <div class="container">
            <div class="filter">
                <div>
                    <el-tabs v-model="formInline.shangping_zhuangtai" @tab-click="handleClick">
                        <el-tab-pane :label="`上架中（${shangjiazhong_zong_shuliang}）`" name="1"></el-tab-pane>
                        <el-tab-pane :label="`仓库中（${changkuzhong_shuliang}）`" name="0"></el-tab-pane>
                        <el-tab-pane :label="`回收站（${huishouzhan_shuliang}）`" name="2"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="form">

                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="类目">
                            <el-select v-model="formInline.da_leimu_id" placeholder="选择类目">
                                <el-option v-for="item in $store.state.indexTypes.da_fenlei_data"
                                           :key="item.Id"
                                           :label="item.fenlei_mingcheng"
                                           :value="item.Id"

                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品名称">
                            <el-input v-model="formInline.shangping_mingcheng" placeholder="商品名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="search" :loading="searchLoading">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="table">
                <el-table :data="tableData" class="item" v-loading="tableLoading"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column align="center" label="商品名称">
                        <template v-slot="scope">
                            <div class="pro">
                                <!--<img :src="scope.row.shangping_tupian" alt="">-->
                                <el-image
                                        :src="scope.row.shangping_tupian"
                                        fit="contain">
                                    <div slot="placeholder" class="placeholder">
                                        <i class="el-icon-loading"></i>
                                    </div>
                                </el-image>
                                <div class="r">
                                    <div class="name" @click="$router.push({path:'/productDetail',query:{id:scope.row.Id}})">{{scope.row.shangping_mingcheng}}</div>
                                    <div class="prop">
                                        <span class="">商品ID：{{scope.row.Id}}</span>
                                        <span>{{brandStr(scope.row.fenlei_da)}}/{{subBrandStr(scope.row.fenlei_xiao)}}</span>
                                    </div>
                                </div>
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="商品价格" width="150">
                        <template v-slot="scope">
                            <div class="num ">
                                <p class="rmb text-danger font-bold ">{{scope.row.shangping_danjia / 100}}</p>
                                <!-- <div class="m-t">{{scope.row.shangping_zhuangtai | statusStr}}</div>-->
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="库存" prop="kucun_shuliang" width="120"></el-table-column>
                    <el-table-column align="center" label="销量" prop="shangping_xiaoliang" width="120"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template v-slot="scope">
                            <div class="action">
                                <el-button v-if="scope.row.shangping_zhuangtai === 2" type="text" size="small"
                                           @click="action(scope.row.Id,'reset')"
                                           class="text-info">
                                    <i class="el-icon-refresh-left m-r-xxs"></i>恢复
                                </el-button>

                                <template v-else>
                                    <el-button type="text" size="small" class="text-dark-lt"
                                               @click="$router.push({name:'release',query:{id:scope.row.Id}})">
                                        <i class="el-icon-edit m-r-xxs"></i>编辑
                                    </el-button>
                                    <el-button type="text" size="small" class="text-dark-lt"
                                               @click="$router.push({name:'addCard',query:{id:scope.row.Id,brand:scope.row.fenlei_da,subrand:fenlei_xiao}})">
                                        <i class="el-icon-sell m-r-xxs"></i>加卡
                                    </el-button>
                                    <el-button type="text" @click="action(scope.row.Id,'down')" size="small"
                                               v-if="scope.row.shangping_zhuangtai === 1" class="text-dark-lt">
                                        <i class="el-icon-sold-out m-r-xxs"></i>下架
                                    </el-button>
                                    <el-button type="text" @click="action(scope.row.Id,'up')" size="small"
                                               v-if="scope.row.shangping_zhuangtai === 0"
                                               class="text-dark-lt">
                                        <i class="el-icon-sold-out m-r-xxs"></i>上架
                                    </el-button>
                                    <el-button type="text" size="small" class="text-dark-lt"
                                               @click="$router.push({name:'stock',query:{id:scope.row.Id}})">
                                        <i class="el-icon-wallet m-r-xxs"></i>库存
                                    </el-button>
                                    <el-button type="text" size="small" @click="action(scope.row.Id,'del')"
                                               class="text-danger">
                                        <i class="el-icon-delete m-r-xxs"></i>删除
                                    </el-button>
                                </template>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination :total="shuliang" :options="formInline" @change="proList"></pagination>
            <bottom-action :value="showBottomAction">
                <template>
                    <p>当前已选：{{selections.length}} 条</p>
                    <div class="m-t">

                        <template v-if="formInline.shangping_zhuangtai === '1'">
                            <el-button type="primary" @click="action(selections,'down')" size="small"
                            >
                                <i class="el-icon-sold-out m-r-xxs"></i>下架
                            </el-button>
                        </template>
                        <template v-if="formInline.shangping_zhuangtai === '0'">
                            <el-button type="success" @click="action(selections,'up')" size="small"

                            >
                                <i class="el-icon-sold-out m-r-xxs"></i>上架
                            </el-button>
                        </template>

                        <template
                                v-if="formInline.shangping_zhuangtai === '0' || formInline.shangping_zhuangtai === '1'">
                            <el-button type="danger" size="small" @click="action(selections,'del')">
                                <i class="el-icon-delete m-r-xxs"></i>删除
                            </el-button>
                        </template>
                        <template v-if="formInline.shangping_zhuangtai === '2'">
                            <el-button type="primary" size="small"
                                       @click="action(selections,'reset')"
                            >
                                <i class="el-icon-refresh-left m-r-xxs"></i>恢复
                            </el-button>
                        </template>
                    </div>
                </template>
            </bottom-action>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'proManage',
        components: {},
        data() {
            return {
                formInline: {
                    shangping_zhuangtai: '1',
                    pageSize: 4,
                    page: 1,
                    da_leimu_id: '',
                    shangping_mingcheng: ''
                },
                rules: {
                    price: [
                        {required: true, message: '请输入充值金额'}
                    ]
                },
                shuliang: 2, //此查询条件状态下的商品数量,分页用这个
                shangjiazhong_zong_shuliang: 0,  //上架的宝贝总数量
                changkuzhong_shuliang: 0,         //仓库中的宝贝的总数
                huishouzhan_shuliang: 0,        //回收站的宝贝的总数量
                tableData: [],
                tableLoading: false,
                searchLoading: false,
                typeList: {
                    da_fenlei_data: [],
                    xiao_fenlei_data: []
                },
                showBottomAction: false,
                selections: []
            }
        },
        computed: {},
        filters: {
            statusStr(val) {
                let obj = {
                    0: '仓库中',
                    1: '上架中',
                    2: '回收站'
                };
                return obj[val]
            },
        },
        methods: {
            handleSelectionChange(val) {
                this.showBottomAction = !!val.length;
                this.selections = val.map(item => item.Id)
            },
            //切换tab
            handleClick(val) {
                this.formInline.page = 1;
                this.proList()
            },
            search() {
                this.searchLoading = true;
                this.proList();
            },
            //获取列表
            proList() {
                this.tableLoading = true;
                this.$axios.post(`/api/shanghu/shangping_guanli`, this.formInline)
                    .then(res => {
                        if (res.code === `200`) {
                            let {
                                shuliang, shangjiazhong_zong_shuliang,
                                changkuzhong_shuliang, huishouzhan_shuliang, shangping_data
                            } = res.data
                            this.tableData = shangping_data;
                            this.shangjiazhong_zong_shuliang = shangjiazhong_zong_shuliang;
                            this.shuliang = shuliang;
                            this.changkuzhong_shuliang = changkuzhong_shuliang;
                            this.huishouzhan_shuliang = huishouzhan_shuliang;
                        }
                    })
                    .finally(()=>{
                        this.searchLoading = false;
                        this.tableLoading = false;
                    })
            },
            //大分类字符
            brandStr(val) {
                if (this.typeList.da_fenlei_data.length && val) {
                    return this.typeList.da_fenlei_data.filter(item => {
                        return item.Id === val
                    })[0].fenlei_mingcheng
                }

            },
            //小分类字符
            subBrandStr(val) {
                if (this.typeList.xiao_fenlei_data.length && val) {
                    return this.typeList.xiao_fenlei_data.filter(item => {
                        return item.Id === val
                    })[0].fenlei_mingcheng
                }

            },
            //获取商品分类
            getType() {
                return new Promise(resolve => {
                    this.$axios.post(`/api/user/get_fenlei`, this.searchForm)
                        .then(res => {
                            resolve();
                            if (res.code === `200`) {
                                this.typeList = res.data;
                                this.typeList.da_fenlei_data.unshift({
                                    Id: '',
                                    fenlei_mingcheng: '全部'
                                })
                            }
                        })
                })
            },
            //下架
            action(ids, type) {
                let urlObj = {
                    down: {
                        name: '下架',
                        url: '/api/shanghu/xiajia_shangping'
                    },
                    del: {name: '删除', url: '/api/shanghu/shanchu_shangping'},
                    reset: {name: '恢复', url: '/api/shanghu/huifu_shangping'},
                    up: {name: '上架', url: '/api/shanghu/shangjia_shangping'},
                };

                if (typeof ids !== 'object') {
                    ids = [ids]
                }
                this.$confirm(`确认${urlObj[type].name}该商品吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post(urlObj[type].url, {Id: ids})
                        .then(res => {
                            if (res.code === `200`) {
                                this.$message.success(urlObj[type].name + '成功');
                                this.proList();
                            }
                        })
                })

            },

        },
        async mounted() {
            let type = this.$route.query.type;
            if(type === undefined){
                type = '1'
            }
            this.formInline.shangping_zhuangtai = type;
            await this.getType();
            this.proList()
        },
    }
</script>

<style lang="less" scoped>
    .filter {
        display: flex;
        justify-content: space-between;
        padding: 15px 0 0 0;
        /deep/ .el-tabs__header {
            margin: 0 !important;
            .el-tabs__nav-wrap::after {
                display: none;
            }
        }
        .form {
            .el-form-item {
                margin-bottom: 5px;
            }
        }
    }

    .table {
        .header {
            background: #fafbfc;
            line-height: 3;
            position: sticky;
        }
        .header, .col {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            & > div {
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .pro {
                flex: 2;

            }
            .num, .status, .price {
                flex: .5;

            }
            .action {
                flex: 2
            }
        }
        .tbody {

        }
    }

    .item {
        border-top: 1px solid #ccc;
        .info {
            background: #fafbfc;
            padding: 10px;
            span {
                margin-right: 15px;
            }
        }
        .col {
            padding: 8px 0;

        }
    }

    .pro {
        display: flex;
        text-align: left;
        justify-content: space-between;
        align-items: stretch;
        /deep/ .el-image {
            width: 150px;
            height: 102px;
            margin-right: 15px;
            border-radius: 5px;
            object-fit: contain;
            border: 1px solid #f5f2f2;
        }
        .r {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: auto;
            .name {
                color: #409EFF;
                font-size: 14px;
                cursor: pointer;
            }
            .prop {
                margin-top: 15px;
                display: flex;
                justify-content: space-between;

            }
        }
    }

    .num {
        display: flex;
        flex-direction: column;

    }

    .action {
        .el-button--text {
            font-size: 14px;
        }

    }
</style>
